<template>
    <div>
        <h1>customRef自定义Ref</h1>
		<input type="text" v-model="keyWord">
		<p>{{keyWord}}</p>
    </div>
    
</template>
<script lang="ts">
import {defineComponent,  reactive,  ref ,  toRefs,toRaw,markRaw, toRef, customRef} from 'vue'
function test<T>(value:T,delay:number=200){
    let timeid:number
	return customRef((track,trigger)=>{
        return {
            get(){
                track()//追踪数据
                return value
            },
            set(newValue:T){
                timeid = setTimeout(()=>{
                    clearTimeout(timeid)
                    value = newValue
                    trigger()//告诉vue更新界面
                },delay)
            }
        }
    })
}
export default defineComponent({
    name:"建哥",
    setup() {
        const keyWord = test<string>("建哥最帅");
		return {
			keyWord
		}
    },
})

</script>
